<template>
  <el-form
        ref="ruleFormRef"
        label-width="100px"
        :model="formData"
        :rules="formRules"
        size="small"
        :inline="false"
    >
      <el-form-item label="主题" prop="title">
        <el-input
            v-model="formData.title"
            placeholder="请输入主题"
            maxlength="32"
            size="small"
        />
      </el-form-item>
      <el-form-item label="候选人" prop="candidateId">
        <el-select
            v-model="formData.candidateId"
            placeholder="请选择候选人"
            style="width: 100%"
            size="small"
            filterable
        >
          <el-option
              v-for="item in candidateList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="筛选人" prop="executorIds">
        <el-select
            v-model="executorId"
            placeholder="请选择筛选人"
            @change="executorSelected"
            size="small"
            filterable
        >
          <el-option
              v-for="item in relatorList"
              :key="item.userId"
              :value="item.userId"
              :label="item.nickname"
          />
        </el-select>
      </el-form-item>
      <!-- {{ formData.actionStartTime }} -->
      <el-form-item label="筛选时间">
        <div style="max-width: 400px">
          <el-date-picker
              v-if="dateType"
              v-model="dateTime"
              style="width: 100%"
              type="datetimerange"
              range-separator="至"
              start-placeholder="行动开始时间"
              end-placeholder="行动结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="chooseTime"
          />
          <el-date-picker
              v-else
              v-model="formData.actionStartTime"
              type="datetime"
              style="width: 100%"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择筛选时间"
          />
        </div>
        <el-button style="margin-left: 10px" plain :icon="Refresh" @click="dateType = !dateType"/>
      </el-form-item>
      <el-form-item label="优先度">
        <el-radio-group v-model="formData.priority">
          <el-radio :label="0" size="small">普通</el-radio>
          <el-radio :label="1" size="small">高</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--    <el-form-item label="通知时间" prop="remindState">-->
      <!--      <el-radio-group v-model="formData.remindState">-->
      <!--        <el-radio v-for="item in remindTimes" :key="item.value" :label="item.value" size="small">{{ item.label }}</el-radio>-->
      <!--      </el-radio-group>-->
      <!--    </el-form-item>-->
      <!--    <el-form-item label="通知方式" prop="remindType">-->
      <!--      <el-checkbox-group v-model="formData.remindType" size="small">-->
      <!--        <el-checkbox label="1">应用、公众号通知</el-checkbox>-->
      <!--        <el-checkbox label="2">短信通知</el-checkbox>-->
      <!--      </el-checkbox-group>-->
      <!--    </el-form-item>-->
    </el-form>
</template>

<script>
// 初筛 OA_INITIAL_SIFT
import {onMounted, reactive, toRefs, ref, watch, nextTick} from 'vue'
import {getListByType} from '/@/api/oa/candidate'
import {getEnterpriseUsers} from '/@/api/sys/user'
// import {getRemindTimes} from '/@/api/matter'
import {homeApi} from '/@/api/home/index'
import {Refresh} from '@element-plus/icons-vue'
import { useCalendarConfig } from '/@/stores/calendar';
import { storeToRefs } from 'pinia';

export default {
    name: 'InitialSiftForm',
    props: {
        selectTime: {
            type: String,
            default: null
        },
        editId: {
          type: String,
          default: null
        }
    },
    setup(props,context) {
        const { selectTime, editId } = toRefs(props)
        const homeCalendar = homeApi()
        const ruleFormRef = ref()
        const storesCalendarConfig = useCalendarConfig();
        const { eventForm } = storeToRefs(storesCalendarConfig)
        const state = reactive({
            formData: {
                candidateId: null, // 候选人id
                title: '候选人初筛', // 事项主题
                content: '',      // 事项描述
                state: 0,           // 状态 -1草稿 0未开始 1进行中 2已完成 3已退回  4已取消 5已撤回
                priority: 0, // 优先级 0普通 1重要
                executorIds: [], // 执行人id 初筛的先做成单选, 如果要多选再改
                actionStartTime: null,   // 事项开始时间
                actionEndTime: null,
                remindState: 'NONE', // 提醒时间, 根据枚举类MatterRemindTimeEnum
                remindType: null     // 提醒方式, 多选
            },
            dateType: false,  // 行动时间范围/单体切换
            dateTime: [],
            executorId: null, // 每次选择执行人都覆盖原来的 formData.executorIds
            relatorList: [], // 关联人数据列表
            candidateList: [], // 候选人数据列表
            remindTimes: [], // 提醒时间列表
            originForm: {}
        })
        const defaultTime = ref('')
        const formRules = reactive({
            candidateId: {required: true, message: '请选择候选人', trigger: 'change'},
            title: {required: true, message: '请输入事项主题', trigger: 'blur'},
            executorIds: {required: true, message: '请选择执行人', trigger: 'change'}
        })
        const dealWithTime = () => {
            const data = new Date()
            // let formatDateTime
            let Y = data.getFullYear()
            let M = data.getMonth() + 1
            let D = data.getDate()
            let H = data.getHours()
            let Min = data.getMinutes()
            let S = data.getSeconds()
            let W = data.getDay()
            M = M < 10 ? '0' + M : M
            D = D < 10 ? '0' + D : D
            H = H < 10 ? '0' + H : H
            Min = Min < 10 ? '0' + Min : Min
            S = S < 10 ? '0' + S : S
            return selectTime.value + ' ' + H + ':' + Min + ':' + S
        }
        const getCandidateData = async () => {
            try {
                const res = await getListByType('0') // 获取待初筛的
                state.candidateList = res.data
            } catch (e) {
                console.log(e)
            }
        }
        let close = (data) => {
            if (data) {
                context.emit('ChiShaiormClose', data)
            } else {
                context.emit('ChiShaiormClose')
            }
            reset()
        }
        let submit = () => {
            if (!ruleFormRef) return
            return new Promise(async (resolve, reject) => {
                await ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        if(editId.value) {
                            // 编辑
                            for(let key in state.formData){
                                if(state.originForm.hasOwnProperty(key)){
                                    state.originForm[key] = state.formData[key]
                                }
                                if(state.originForm.info.hasOwnProperty(key)){
                                    state.originForm.info[key] = state.formData[key]
                                }
                            }
                            storesCalendarConfig.setEventForm(state.originForm)
                            resolve('edit') 
                        }else{
                            homeCalendar.addInitialSift(state.formData).then((res) => {
                                if (res.code === 0) {
                                    reset()
                                    close(res.data)
                                    resolve()
                                }
                            })
                        }
                    } else {
                        reject()
                        console.log('error submit!', fields)
                    }
                })
            })
        }
        const chooseTime = (val) => {
            if (val && val.length === 2) {
                state.formData.actionStartTime = val[0]
                state.formData.actionEndTime = val[1]
            } else {
                state.formData.actionStartTime = state.formData.actionEndTime = null
            }
        }
        const reset = () => {
            if (!ruleFormRef) return
            ruleFormRef.value.resetFields()
        }
        const executorSelected = (val) => {
            state.formData.executorIds = [val]
        }
        watch(() => eventForm.value,
          val => {
            if(editId.value && val) {
              // 编辑
              nextTick(() => {
                const data = val
                if(!data) return
                state.originForm = data
                for(let params in data.info){
                  // 拿出info里面的数据
                  if(state.formData.hasOwnProperty(params)) {
                    state.formData[params] = data.info[params]
                  }
                }
                for(let key in data) {
                  // 列表里面的数据
                  if(state.formData.hasOwnProperty(key)) {
                    state.formData[key]= data[key]
                  }
                }
                if(data.actionStartTime && data.actionEndTime) {
                  // 时间组合
                  state.dateTime = [data.actionStartTime, data.actionEndTime]
                }
                if(data.remindType){
                  state.formData.remindType = data.remindType.split(',')
                }
              })
            }
          }        
        )
        onMounted(() => {
            getCandidateData()
            getEnterpriseUsers().then(res => state.relatorList = res.data)
            // getRemindData()
            const time = dealWithTime()
            state.formData.actionStartTime = time
            defaultTime.value = time
        })
        return {
            ...toRefs(state),
            getCandidateData,
            executorSelected,
            submit,
            close,
            formRules,
            ruleFormRef,
            reset,
            dealWithTime,
            defaultTime,
            Refresh,
            chooseTime
        }
    }
}
</script>

<style>

</style>